<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/list.css">
    <link rel="stylesheet" href="../css/videoList.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.8.0/jquery-1.8.0.js"></script>
</head>
<style>
    .listMain .listMain2{
        width: 920px;
        margin-right: 0;
    }
</style>
<body>
<div class="scyweizhi"><!--scyweizhi开始-->
    <div class="scyweizhis">
        <ul>
            <li class="s1">&nbsp;</li>
            <li id="dqwz">
                <a href="../../../" title="首页" class="CurrChnlCls">首页</a>

                <a href="./" title="2018" class="CurrChnlCls s2">新风讲堂</a>
            </li>
        </ul>
    </div>
</div>
<!--中间区域-->
<div class="listMain">
    <div class="container clearfix">
        <div class="left listMain1">
            <div class="listTitle">
                国机新风
            </div>
            <ul class="toggleMenu">
                <li class="topMenuLi">
                    <a class="topMenuLiA">
                        新风讲堂
                    </a>
                    <ul class="secodeMenu">
                        <li >
                            <a class="secodeMenuli">
                                两学一做
                            </a>
                            <ul class="thirdMenu">
                                <li class="current">
                                    <a >全部</a>
                                </li>
                                <li>
                                    <a >学党章</a>
                                </li>
                                <li>
                                    <a >学党史</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="topMenuLi">
                    <a class="topMenuLiA">
                        新风展馆
                    </a>
                </li>
                <li class="topMenuLi">
                    <a class="topMenuLiA">
                        新风社区
                    </a>
                    <ul class="secodeMenu">
                        <li >
                            <a class="secodeMenuli">
                                两学一做
                            </a>
                            <ul class="thirdMenu">
                                <li >
                                    <a >全部</a>
                                </li>
                                <li>
                                    <a >学党章</a>
                                </li>
                                <li>
                                    <a >学党史</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>

        <div class="left listMain2">
            <h3>新风讲堂</h3>
            <!--视频详情-->
            <div class="videoDetail">
                <p>
                    《中国共产党党组工作条例》解读
                </p>
                <div class="videoWrap">
                    <video src="../images/1.mp4" controls="">

                    </video>
                </div>
            </div>
            <div class="videoTab">
                <div class="tabTop">
                    <span class="sp1 active">选集</span>
                    <span class="sp2">课程信息</span>
                </div>
                <div class="tabCon">
                    <div class="con1 videoDesc active">
                            <p class="active">
                                <a href="">工信部：全面推动实施重大短板装备专项工程</a>
                            </p>
                            <p>
                                <a href="">工信部：全面推动实施重大短板装备专项工程</a>
                            </p>
                            <p>
                                <a href="">工信部：全面推动实施重大短板装备专项工程</a>
                            </p>
                            <p>
                                <a href="">工信部：全面推动实施重大短板装备专项工程</a>
                            </p>
                            <p>
                                <a href="">工信部：全面推动实施重大短板装备专项工程</a>
                            </p>
                            <p>
                                <a href="">工信部：全面推动实施重大短板装备专项工程</a>
                            </p>
                            <p>
                                <a href="">工信部：全面推动实施重大短板装备专项工程</a>
                            </p>
                            <p>
                                <a href="">工信部：全面推动实施重大短板装备专项工程</a>
                            </p>
                    </div>
                    <div class="con2 videoDesc">
                        《中国共产党党组工作条例》的公布，对于规范党组的运作，提高党组工作的效率，理顺各个方面的关系发挥了重要的作用。中共中央党校政法教研部教授王立峰就此条例发布的背景、意义以及主要内容进行解读。
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $('.topMenuLiA').on('click',function (e) {
        e.stopPropagation()
        $(this).parent('.topMenuLi').toggleClass('active')
        $(this).parent('.topMenuLi').find('.secodeMenu').toggleClass('active')
    })
    $('.secodeMenuli').on('click',function (e) {
        e.stopPropagation()
        $(this).parents('.secodeMenu').toggleClass('active')
        $(this).toggleClass('active')
    });
    $('.tabTop span').on('click',function () {
        var index =$(this).index()
        for(var i=0;i<$('.tabTop span').length;i++){
            $('.tabTop span').eq(i).removeClass('active')
            $('.tabCon .videoDesc').eq(i).removeClass('active')
        }
        $('.tabTop span').eq(index).addClass('active')
        $('.tabCon .videoDesc').eq(index).addClass('active')

    })
</script>
</body>
</html>